<template>
  <div class="creative-center-container no-background-container" v-loading="listLoading">
    <el-row :gutter="50" style="margin-bottom: 20px;">
      <el-col :span="20">
        <el-button :type="step === 0 ? 'primary' : ''" @click="step=0">企业简介</el-button>
        <el-button :type="step === 1 ? 'primary' : ''" @click="step=1">主营业务</el-button>
        <el-button :type="step === 2 ? 'primary' : ''" @click="step=2">产品\服务提取</el-button>
        <el-button :type="step === 3 ? 'primary' : ''" @click="step=3">20+8行业分类</el-button>
      </el-col>
      <el-col :span="4">
        <el-button @click="handleDetail">企业详情</el-button>
        <el-button @click="handleConfigDetail">配置详情</el-button>

      </el-col>
    </el-row>

    <div v-for="(item, key) in detailForm.detail_result">
      <el-row :gutter="20" v-if="step === key">
        <!-- 根据colConfigs配置显示和span -->
        <el-col :span="colConfigs[step][0].span" v-if="colConfigs[step][0].show">
          <vab-card style="height: 100%">
            <template #header>
              联网查询结果
            </template>
            <el-scrollbar style="height:70vh;">
              <ul>
                <li v-for="i in item.search" style="color:#4e88f3;cursor: pointer;" @click="showDialog(i)">
                  {{ i.title }}
                </li>
              </ul>
            </el-scrollbar>
          </vab-card>
        </el-col>
        <el-col :span="colConfigs[step][1].span" v-if="colConfigs[step][1].show">
          <vab-card style="height: 100%">
            <template #header>
              RAG结果
            </template>
            <el-scrollbar style="height:70vh;">
              <ul>
                <li v-for="i in item.rag" style="color:#4e88f3;cursor: pointer;" @click="showDialog(i)">
                  {{ i.title?i.title:i.source }}
                </li>
              </ul>
            </el-scrollbar>
          </vab-card>
        </el-col>
        <el-col :span="colConfigs[step][3].span" v-if="colConfigs[step][3].show">
          <vab-card style="height: 100%">
            <template #header>
              日志
            </template>
            <el-scrollbar style="height:100%" v-html="item.log.replace(/\n/g, '<br/><br/>')">
            </el-scrollbar>
          </vab-card>
        </el-col>
      </el-row>
    </div>


    <vab-dialog
      v-model="dialogVisible"
      :align-center="form.alignCenter"
      :animated="form.animated"
      append-to-body
      :center="form.center"
      :close-on-click-modal="form.closeOnClickModal"
      :close-on-press-escape="form.closeOnPressEscape"
      :destroy-on-close="true"
      :draggable="form.draggable"
      :fullscreen="form.fullscreen"
      :modal="form.modal"
      :show-fullscreen="form.showFullscreen"
      :theme="form.theme"
      :top="form.top + 'vh'"
      :width="form.width + '%'"
    >
      <el-row :gutter="30">
        <el-col :span="24">
          网站名称: {{ form.detail.title }}{{ form.detail.source ?? ""}}
        </el-col>

        <el-col :span="24" style="margin-top:30px" v-if="form.detail.url">
          链接: {{ form.detail.url }}
        </el-col>
      </el-row>

      <el-row :gutter="30" style="margin-top:30px;" v-if="form.detail.score">
        <el-col :span="24">
          score:{{form.detail.score}}
        </el-col>
      </el-row>
      <el-row :gutter="30" style="margin-top:30px;">
        <el-col :span="24">
          <el-scrollbar style="height:400px;overflow-y: scroll" v-html="form.detail.content"></el-scrollbar>
        </el-col>
      </el-row>

    </vab-dialog>

  </div>
</template>

<script lang="ts" setup>
import {ArrowRight, CaretBottom, CaretTop} from '@element-plus/icons-vue'
import {random} from 'lodash-es'
import landscape from '/@/assets/common_images/landscape.jpg'
import {getDetail} from '/@/api/company'

const route: any = useRoute()
const router = useRouter()

const detailForm = reactive<any>({
  uid: '',
  company_name: '',
  content: {},
  create_time_name: '',
})
const listLoading = ref<boolean>(true)
const dialogVisible = ref(false)

const form = reactive<any>({
  showFullscreen: true,
  animated: true,
  draggable: true,
  width: 40,
  detail: {},
  alignCenter: false,
  modal: true,
  fullscreen: false,
  center: false,
  closeOnClickModal: false,
  closeOnPressEscape: false,
  theme: 'default',
  top: 15,
})
const colConfigs = {
  0: [
    {show: true, span: 12}, // 第一个el-col的配置
    {show: true, span: 12}, // 第二个el-col的配置
    {show: false, span: 0}, // 第三个el-col的配置
    {show: false, span: 0}, // 第四个el-col的配置
  ],
  1: [
    {show: true, span: 12}, // 第一个el-col的配置
    {show: true, span: 12}, // 第二个el-col的配置
    {show: false, span: 0}, // 第三个el-col的配置
    {show: false, span: 0}, // 第四个el-col的配置
  ],
  2: [
    {show: false, span: 12}, // 第一个el-col的配置
    {show: false, span: 12}, // 第二个el-col的配置
    {show: false, span: 0}, // 第三个el-col的配置
    {show: true, span: 24}, // 第四个el-col的配置
  ],
  3: [
    {show: false, span: 12}, // 第一个el-col的配置
    {show: true, span: 12}, // 第二个el-col的配置
    {show: false, span: 0}, // 第三个el-col的配置
    {show: true, span: 12}, // 第四个el-col的配置
  ],
  // 可以为其他step也定义配置
};
const step = ref(0)
const getDetails = async (id) => {
  listLoading.value = true
  const {data} = await getDetail({id: id})
  Object.assign(detailForm, data) // 使用Object.assign来合并对象
  listLoading.value = false
}

const showDialog = (item) => {
  console.log(item)
  form.detail = item
  dialogVisible.value = true
}
defineOptions({
  name: 'companySearch',
})

const queryForm = reactive<any>({
  company_name: '',
})
const search = () => {
  console.log(queryForm.company_name)
}
onBeforeMount(() => {
  const id = route.query.id
  getDetails(id)
})
const handleDetail = (row: any) => {
  const id = route.query.id

  if (id)
    router.push({
      path: '/historySearch/companyDetail',
      query: {
        id: id,
        timestamp: Date.now(), //允许同一个详情页同时打开多次，否则会触发路由被缓存下次无法刷新的bug
      },
    })

}
const handleConfigDetail = (row: any) => {
  const id = route.query.id
  if (id)
    router.push({
      path: '/companyConfig/companyConfigDetail',
      query: {
        id: id,
      },
    })

}
</script>

<style lang="scss" scoped>
.creative-center-container {
  .item-content-wrap {
    display: flex;
    align-items: center;
    justify-items: center;

    :deep() {
      .el-image {
        width: 80px;
        margin-right: 15px;
        border-radius: var(--el-border-radius-base);
      }
    }
  }

  .el-statistic {
    --el-statistic-content-font-size: 28px;
  }

  .statistic-card {
    height: 100%;
    padding: var(--el-padding);
    background-color: var(--el-bg-color-overlay);
    border-radius: 4px;

    :deep() {
      .el-statistic__head {
        margin-bottom: var(--el-margin);

        [class*='ri'] {
          margin-top: -1.5px;
          margin-right: 3px;
        }

        .ri-user-heart-line {
          color: var(--el-color-danger);
        }

        .ri-contacts-book-2-line {
          color: var(--el-color-primary);
        }

        .ri-money-cny-circle-line {
          color: var(--el-color-warning);
        }
      }

      .el-statistic__head,
      .el-statistic__content {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
      }
    }

    .statistic-footer {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      margin-top: var(--el-margin);
      font-size: var(--el-font-size-small);
      color: var(--el-text-color-regular);

      .footer-item {
        display: flex;
        align-items: center;
        justify-content: center;

        span:last-child {
          display: inline-flex;
          align-items: center;
          margin-left: 4px;
        }
      }

      .green {
        color: var(--el-color-success);
      }

      .red {
        color: var(--el-color-error);
      }
    }
  }

  .vab-card {
    ul {
      padding: 0;
      margin: 0;
      line-height: 30px;
      list-style: none;

      span {
        color: var(--el-color-grey);
      }
    }

    :deep() {
      .el-card__header {
        .more {
          position: absolute;
          right: var(--el-margin);
          cursor: pointer;
        }
      }
    }
  }

  :deep() {
    .el-descriptions__body {
      background: none;
    }

    .el-carousel {
      margin-bottom: 20px;
      border-radius: var(--el-border-radius-base);

      &__item {
        .el-image {
          width: 100%;
          object-fit: fill;
        }
      }
    }
  }
}
</style>
